/**
 * @author:bjzhang
 */

'use strict';

import React,{Component} from 'react';
import {
    View,
    Image,
    Animated,
    Dimensions
} from 'react-native';

const SPRING_CONFIG = {duration:2000}; //Soft spring
const CIRCLE_DIMENSIONS = 69;
const {width,height} = Dimensions.get('window');
const WINDOW_DIMENSIONS =  { width: width,height:height - 200};
export default class HuntChest extends Component{
    constructor(){
        super();
        this.state = {
            sizeOne:new Animated.Value(CIRCLE_DIMENSIONS),
            sizeTwo:new Animated.Value(CIRCLE_DIMENSIONS)
        }
    }
    componentDidMount(){
        this.startAndRepat();
    }
    startAndRepat(){
        this && this.triggerAnimation(this);
    }
    triggerAnimation(){
        this.state.sizeOne.setValue(CIRCLE_DIMENSIONS);
        this.state.sizeTwo.setValue(CIRCLE_DIMENSIONS);
        Animated.parallel([
            Animated.timing(
                this.state.sizeOne,
                {...SPRING_CONFIG,toValue:240}
            ),
            Animated.timing(this.state.sizeTwo,
                {...SPRING_CONFIG,toValue:240,delay:500}
            )
        ]).start(()=>this.triggerAnimation());
    }
    getStyle(size){
        return {
            width:size,
            height:size,
            borderRadius:size,
            position:'absolute',
            left:size.interpolate({
                inputRange:[69,240],
                outputRange:[(WINDOW_DIMENSIONS.width - 69)/2,(WINDOW_DIMENSIONS.width - 240)/2]
            }),
            top:size.interpolate({
                inputRange:[69,240],
                outputRange:[(WINDOW_DIMENSIONS.height - 69)/2,(WINDOW_DIMENSIONS.height - 240)/2]
            })
        }
    }
    render(){
        return(
            <View style={{flex:1}}>
                <Image resizeModel={Image.resizeMode.cover} style={styles.container} source={require('../../image/bg.png')}>
                    <Animated.View style={[styles.circlespread,
                                   this.getStyle(this.state.sizeOne),
                                   {
                                      opacity:this.state.sizeOne.interpolate({
                                          inputRange:[69,240],
                                          outputRange:[.3,0]
                                      })
                                   }]}>
                    </Animated.View>
                    <Animated.View style={[styles.circlespread,
                                   this.getStyle(this.state.sizeTwo),
                                   {
                                      opacity:this.state.sizeTwo.interpolate({
                                          inputRange:[69,240],
                                          outputRange:[.2,0]
                                      })
                                   }]}>
                    </Animated.View>
                    <View style={[styles.circlespread,
                              {
                                 width:CIRCLE_DIMENSIONS,
                                 height:CIRCLE_DIMENSIONS,
                                 borderRadius:CIRCLE_DIMENSIONS,
                                 opacity:1,
                                 position:'absolute',
                                 left: (WINDOW_DIMENSIONS.width - CIRCLE_DIMENSIONS) / 2,
                                 top:(WINDOW_DIMENSIONS.height - CIRCLE_DIMENSIONS) / 2
                              }]} />
                </Image>
            </View>
        );
    }
}

const styles = {
    container:{
        flex:1,
        alignItems:'center',
        justifyContent:'center',
        width:null,
        height:null,
        backgroundColor:'rgba(0,0,0,0)'
    },
    circlespread:{
        backgroundColor:'#4FCFFF',
        alignItems:'center',
        justifyContent:'center'
    }
}